<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">


<body data-type="index">
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"/>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/memu.jsp"/>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">转账操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form">


                                <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">银行卡 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select id="cards" data-am-selected="{searchBox: 1}" style="display: none;">
                                              <option value="no">请选择银行卡</option>
                                              <option value="b">622***009</option>
                                              <option value="o">622***007</option>
                                            </select>

                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="cardNumIn" class="am-u-sm-3 am-form-label">转入卡号 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="cardNumIn" placeholder="请输入收款卡号">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="pwd" class="am-u-sm-3 am-form-label">密码 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" class="tpl-form-input" id="pwd" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="amount" class="am-u-sm-3 am-form-label">金额 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="amount" placeholder="请输入转账金额">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button onclick="transfer();" type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success ">转账</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                    <div id="orderDiv">
                        <el-table
                                :data="orders"
                                border
                                style="width: 100%">
                            <el-table-column
                                    fixed
                                    prop="orderId"
                                    label="订单ID"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="cardOutNum"
                                    label="转出卡号"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="cardInNum"
                                    label="转入卡号"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="amount"
                                    label="金额"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    label="创建时间"
                                    width="300">
                            </el-table-column>
                            <el-table-column
                                    prop="orderStatus"
                                    label="状态"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status == 1" type="text" size="small" @click="handlerCancelOrder(scope.$index, scope.row)">取消转账</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[1, 2, 3, 4]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="orderTotal">
                            </el-pagination>
                        </div>
                    </div>


                    
                    
                </div>

               

 
                </div>



            </div>
        </div>
    </div>
    </div>



    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>


    var vm = new Vue({
        el : '#orderDiv',
        data : {
            orders : [],
            currentPage : 1,
            pageSize : 2,
            orderTotal : 0
        },
        methods : {
            //当前页change事件处理函数
            handleCurrentChange : function (pageNum) {
                alert(pageNum);
                loadTransferOrder(pageNum, this.pageSize);
            },

            //pageSize change事件处理函数
            handleSizeChange : function (pageSize) {
                alert(pageSize);
                this.pageSize = pageSize;
            },
            handlerCancelOrder : function (index, order) {
                console.log('index=' + index);
                console.log('row=' + order);
                cancelOrder(order.orderId);
            }
        }
    })

    $(document).ready(function () {
        atm.loadMyCard();
        $('#transfer').addClass('active');
        loadTransferOrder();
    })

    function transfer() {
        atm.ajax({
            url : '/card/transfer',
            requestMethod : 'GET',
            data : {
                cardId : $('#cards').val(),
                password :$('#pwd').val(),
                amount :$('#amount').val(),
                cardNumIn : $('#cardNumIn').val()
            },
            success : function (responseData) {
                window.location.href = '/user/toHome'
            }
        })
    }

    function loadTransferOrder(currentPage, pageSize) {
        atm.ajax({
            url : '/card/listOrders',
            requestMethod : 'GET',
            data : {
                currentPage : currentPage,
                pageSize : pageSize
            },
            success : function (responseData) {
                var xx = '{usernmae : "tom", age : 90}';
                xx = {
                    username : 'tom',
                    age : 90
                }

                xx.age;

                var orders = responseData.data.data;
                var orderTotal = responseData.data.total;
                console.log(orders.length);
                vm.orders = orders;
                vm.orderTotal = orderTotal;
            }
        })
    }

    function cancelOrder(orderId) {
        atm.ajax({
            url : '/card/cancelTransfer',
            requestMethod : 'GET',
            data : {
                orderId : orderId
            },
            success : function (responseData) {
                alert('订单取消成功');
                window.location.reload();
            }
        })
    }


</script>

</body>

</html>